<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/template-web.js"></script>
    <script src="./js/ajax.js"></script>
    <link rel="stylesheet" href="./css/head.css">
</head>

<body>

    <!-- 头部 -->
    <header>
        <div class="jianjianhead-size">
            <div class="jianjian-headsizebar">
                <div>
                    <a href="/">
                        <img class="jianjian-img" src="./images/index/jianjian-logo.png" alt="">
                    </a>
                </div>
                <div>
                    <a href="/list.html"><span>所有商品</span></a>
                </div>
                <div>
                    <a href="#"><span>新品</span></a>
                </div>
                <div>
                    <a href="#"><span>无线</span></a>
                </div>
                <div>
                    <a href="#"> <span>HiFi</span></a>
                </div>
                <div>
                    <a href="#"><span>降噪</span></a>
                </div>
                <div>
                    <a href="#"><span>耳机配件</span></a>
                </div>
                <div>
                    <a href="#"><span>会员待遇</span></a>
                </div>
                <div>
                    <a href="/activity.html"><span>企业购</span></a>
                </div>
                <div>
                    <div>
                        <input type="text" placeholder="新品上市">
                        <img src="./images/index/搜索 (1).png">
                    </div>
                </div>
                <div>
                    <ul>
                        <li class="jianjian-yonghu">
                            <img src="./images/index/用户.png">
                            <ul class="jianjian-yonghuyc">
                                <!-- 登录状态不同样式 -->
                                <script id="head-login" type="text/html">
                                    {{if uid}}
                                    <div>
                                        <li class="item first">
                                            <span style="font-size: 16px;">欢迎<label
                                                    style="color: #0096D1;">{{uname}}</label></span>
                                        </li>
                                        <li class="item">
                                            <a href="/user.html" style="font-size: 16px;">个人中心</a>
                                        </li>
                                        <li class="item">
                                            <a href="/user.html" style="font-size: 16px;">我的订单</a>
                                        </li>
                                        <li>
                                            <hr>
                                        </li>
                                        <li class="item">
                                            <button onclick="back()" class="jianjian-btn2">退出登录</button>
                                        </li>
                                    </div>
                                    {{else}}
                                    <div>
                                        <li>
                                            <p style="font-size: 5px;">已是会员</p>
                                        </li>
                                        <li>
                                            <button onclick="to_login()" class="jianjian-btn">登录</button>
                                        </li>
                                        <li>
                                            <hr>
                                        </li>
                                        <li>
                                            <p style="font-size: 5px;">注册会员</p>
                                        </li>
                                        <li>
                                            <button onclick="to_login()" class="jianjian-btn2">注册</button>
                                        </li>
                                    </div>
                                    {{/if}}
                                </script>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li class="jianjian-gouwuche">
                            <img src="./images/index/购物车.png" alt="">
                            <ul class="jianjian-gouwucheyc">
                                <!-- 购物车不同状态 -->
                                <script id="head-cart" type="text/html">
                                    {{if data}}
                                    {{each data}}
                                    <li>
                                        <div class="jianjian-gouwucheyc2">
                                            <div>
                                                <img class="jianjian-img-1" src="{{$value.img1}}">
                                            </div>
                                            <div class="product_name">
                                                {{$value.pname}}
                                            </div>
                                            <div>
                                                <p style="font-size: 16px;">¥{{$value.price}}</p>
                                            </div>
                                            <div class="jianjian-yc">
                                                <a href="javascript:;" onclick="cart_delete({{$value.cart_id}})">
                                                    <img src="./images/index/删 除.png">
                                                </a>
                                            </div>
                                        </div>
                                    </li>
                                    {{/each}}
                                    <li>
                                        <hr>
                                    </li>
                                    <li>
                                        <div class="jianjian-gouwucheyc2">
                                            <span>共{{allPnum}}件商品</span>
                                            <span style="color: #36d; font-size: 18px;">¥{{allPrice}}</span>
                                        </div>
                                    </li>
                                    <li>
                                        <button onclick="go_cart()" class="btn-gouwuche">结算</button>
                                    </li>
                                    {{else}}
                                    <li><img src="./images/index/购物车 (1).png"></li>
                                    <li>
                                        <p style="font-size: 9px; color: grey;">您的购物车还没有商品，赶紧选购吧~</p>
                                    </li>
                                    {{/if}}
                                </script>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="jianjianhead-sizeyc">
            <div class="jianjian-headsizebaryc">
                <div>
                    <a href="#"><img src="./images/index/jianjian-logo.png"></a>
                </div>
                <div>
                    <div>
                        <input type="text" placeholder="IE 100 PRO">
                        <img src="./images/index/搜索 (1).png">
                    </div>
                    <p style="color: gray; font-size: 15px;">大家都在搜</p>
                    <div class="jianjian-text">
                        <a href="#">
                            <p>新品</p>
                        </a>
                        <a href="#">
                            <p>MOMENTUM</p>
                        </a>
                        <a href="#">
                            <p>游戏</p>
                        </a>
                        <a href="#">
                            <p>GSP600</p>
                        </a>
                        <a href="#">
                            <p>真无线二代</p>
                        </a>
                        <a href="#">
                            <p>IE800</p>
                        </a>
                    </div>
                </div>
                <div>
                    <a id="close" href="javascript:;">
                        <img src="./images/index/叉.png">
                    </a>
                </div>
            </div>
        </div>

    </header>

    <script src="./js/head.js"></script>

</body>

</html>